<template>
	<view>

		<view style="position: relative;">
			<!-- #ifndef APP -->
			<view>
				<map id="map" style="width: 100%; height: 50vh;" :latitude="latitude" :longitude="longitude"
					:markers="covers" :polyline="polyline" :customCallout="customCallout">
				</map>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<view class="" >
			<!-- #endif -->
			<!-- #ifndef APP -->
			<view class="listbb" >
			<!-- #endif -->
				<view class="boxa">
					<view class="flex align-center justify-between padding-lr">
						<view class="flex align-center">
							<image src="../../static/image/data.png" style="width: 34rpx;height: 38rpx;"></image>
							<view class="margin-left-sm" v-if="order.indentType==1"> 即时代驾</view>
							<view class="margin-left-sm" v-if="order.indentType==2">朋友代叫</view>
							<view class="margin-left-sm" v-if="order.indentType==3">预约代驾</view>
						</view>
						<view v-if="order.indentType==3&&order.hopeTime">预约时间：{{order.hopeTime}}</view>
						<view class="text-26" v-if="order.distance&&order.indentType!=3">全程公里数
							<text style="color: #3699FF;">{{Number(order.distance).toFixed(2)}}km</text>
						</view>
					</view>
					<view class="margin-tb-sm" style="width: 100%;height:1rpx;background: #F2F2F2;"></view>
					<view class="addbox bgs margin-lr margin-bottom"
						@click="openMap(order.shipAddressLatitude,order.shipAddressLongitude,order.shipAddress)">
						<view class="add_cont">
							<view class="green"></view>
							<view class="add_tit">
								<view>{{order.shipAddress}}</view>
							</view>
						</view>
						<view>
							<image src="../../static/image/ladd.png" style="width: 30rpx;height: 35rpx;"></image>
						</view>
					</view>
					<view class="addbox bg margin-lr"
						@click="order.deliveryAddress?openMap(order.deliveryAddressLatitude,order.deliveryAddressLongitude,order.deliveryAddress):''">
						<view class="add_cont">
							<view class="orgin"></view>
							<view class="add_tit">{{order.deliveryAddress?order.deliveryAddress:'用户未选择目的地'}}</view>
						</view>
						<view>
							<image src="../../static/image/hadd.png" style="width: 30rpx;height: 35rpx;"></image>
						</view>
					</view>
					<view class="margin-lr margin-top-sm" v-if="order.remarks">备注：{{order.remarks}}</view>
					<view class="margin-tb-sm" style="width: 100%;height:1rpx;background: #F2F2F2;"></view>
					<view class="flex align-center justify-between padding-lr ">
						<view class="flex align-center" v-if="order.riderDistance">
							<image src="../../static/image/add.png" style="width: 30rpx;height: 35rpx;"></image>
							<view class="margin-left-xs">距您<text
									style="color: #3699FF;">{{(Number(order.riderDistance)).toFixed(2)}}km</text>
							</view>
						</view>
						
						<view class="flex align-center">预估
							<view style="color: #FF2020;font-size: 32rpx;">
								<text>¥</text><text class="text-bold"
									style="font-size: 38rpx;">{{order.riderMoney}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="user">
					<image :src="order.avatar?order.avatar:'../../static/logo.png'"
						style="width: 90rpx;height: 90rpx;border-radius: 55%;"></image>
					<view class="flex align-center justify-between" style="width: 90%;">
						<view class="margin-left-xs">
							<view>{{order.shipUserName}}</view>
							<!-- <view>{{order.shipUserPhones}}</view> -->
						</view>
						<!-- <view @click="bindPhone">
							<image src="../../static/my/phone.png" style="width: 44rpx;height: 54rpx;"></image>
						</view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="taber">
			<view class="btn" @click="jiedan()">抢单</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '@/components/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				qqmapsdk: {}, // 腾讯地图小程序的SDK
				covers: [], // 地图上面的标记点
				to: { // 目的地坐标
					latitude: '',
					longitude: '',
				},
				polyline: [], //路线
				polylines: '',

				indentNumber: '',
				order: [],

			}
		},
		onLoad(option) {
			// 实例化API核心类
			this.$Request.getT('/app/common/type/282').then(res => { //师傅端腾讯地图key
				if (res.code === 0) {
					this.qqmapsdk = new QQMapWX({
						key: res.data.value // 自己申请的key值
					})
				}
			});


			if (option.indentNumber) {
				this.indentNumber = option.indentNumber
				this.getorderDet()
			}
		},
		onShow() {

		},
		methods: {
			// 一键导航
			openMap(latitude, longitude, name) {
				uni.openLocation({
					latitude: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			bindPhone() {
				uni.makePhoneCall({
					phoneNumber: this.order.shipUserPhone //仅为示例
				});
			},
			getorderDet() {
				let data = {
					indentNumber: this.indentNumber
				}
				this.$Request.getT('/app/indent/riderGetIndentInfo', data).then(res => {
					if (res.code === 0) {
						this.order = res.data
						if (this.order.shipUserPhone) {
							let mobile = this.order.shipUserPhone
							this.order.shipPhone = mobile.substring(0, 3) + "****" + mobile.substring(7)
						}
						this.latitude = this.order.shipAddressLatitude
						this.longitude = this.order.shipAddressLongitude

						this.to.latitude = this.order.deliveryAddressLatitude
						this.to.longitude = this.order.deliveryAddressLongitude

						this.covers = [{
							id: 1,
							latitude: this.order.shipAddressLatitude,
							longitude: this.order.shipAddressLongitude,
							iconPath: '../../static/image/qi.png',
							width: 32,
							height: 44,
							callout: { //自定义标记点上方的气泡窗口 点击有效
								content: this.order.shipAddress, //文本
								color: '#333333', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 6, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							},
						}, {
							id: 2,
							latitude: this.order.deliveryAddressLatitude,
							longitude: this.order.deliveryAddressLongitude,
							iconPath: '../../static/image/zd.png',
							width: 32,
							height: 44,
							callout: { //自定义标记点上方的气泡窗口 点击有效
								content: this.order.deliveryAddress, //文本
								color: '#333333', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 6, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							},
						}]
						this.polylines = this.order.polyline
						this.routePlanning()
					}
				});
			},
			// 步行路线规划
			routePlanning() {
				let that = this
				that.qqmapsdk.direction({
					mode: 'driving', // 驾车
					from: { // 起始位置(当前位置)坐标
						latitude: that.latitude,
						longitude: that.longitude
					},
					to: that.to, // 目的地位置坐标
					success(res) {
						console.log(res, '=======')
						// var coors = JSON.parse(that.polylines)
						// console.log(coors,'11111111111111')
						var coors = res.result.routes[0].polyline
						// console.log(coors2,'11111111111111')
						var pl = [] // 点串数组
						// 坐标解压(返回的点串坐标，通过前向差分进行压缩)
						var kr = 1000000
						for (var i = 2; i < coors.length; i++) {
							coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr
						}
						// 将解压后的坐标放入点串数组pl中
						for (var i = 0; i < coors.length; i += 2) {
							pl.push({
								latitude: coors[i],
								longitude: coors[i + 1]
							})
						}
						// 设置polyline属性，将路线显示出来，将解压坐标第一个数据作为起点
						that.polyline = [{
							points: pl,
							color: '#346EF6',
							width: 4
						}]
					}
				})
			},
			//接单
			jiedan(indentNumber) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定抢单吗？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							that.$Request.postT(
									'/app/indent/indentReceiving?indentNumber=' +
									that.indentNumber)
								.then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '接单成功',
											icon: 'none'
										})
										setTimeout(function() {
											uni.switchTab({
												url: '/pages/order/order'
											})
										}, 1000)
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 1500
										})
									}
								});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	.listbb {
		position: absolute;
		left: 0;
		right: 0;
		top: 360rpx;
	}

	.boxa {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx;
		padding: 30rpx 0;
	}


	.addbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 110rpx;
		border-radius: 16rpx;

	}

	.add_cont {
		display: flex;
		align-items: center;
	}

	.add_tit {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.bg {
		background: #F5F5F5;
	}

	.bgs {
		background: #F5F8FF;

	}

	.green {
		width: 16rpx;
		height: 16rpx;
		background: #1FC657;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.orgin {
		width: 16rpx;
		height: 16rpx;
		background: #FBAC04;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		margin: 30rpx;
		display: flex;
		align-items: center;

	}

	.taber {
		background: #FFFFFF;
		padding: 10rpx 30rpx;
		position: fixed;
		bottom: 0;
		left: 0rpx;
		right: 0rpx;
		z-index: 99;

		.btn {
			height: 78rpx;
			background: linear-gradient(87deg, #346EF6 0%, #7BA2FF 100%);
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>